<template>
  <div>
    <el-row :gutter="20" style="margin-bottom: 20px">
          <el-input
              placeholder="请输入产品名称"
              v-model="name"
              clearable>
          </el-input>
          <el-input
              placeholder="请输入用户名"
              v-model="name"
              clearable>
          </el-input>
          <el-input
              placeholder="请输入产品标识"
              v-model="deviceKey"
              clearable>
          </el-input>
          <template>
            <el-select v-model="areaCode" placeholder="请选择所属地区">
              <el-option
                  v-for="Area in AreaList"
                  :key="Area.areaCode"
                  :label="Area.name"
                  :value="Area.areaCode">
              </el-option>
            </el-select>
          </template>
          <el-button type="primary" @click.prevent="fnLoadData(1)">查询</el-button>
          <el-button type="danger"  @click.prevent="fnRestFrom">
            <i class="el-icon-refresh-left" ></i>清空
          </el-button>
    </el-row>
    <el-table
        :data="bean.list"
        border
        style="width: 100%;text-align: center">
      <el-table-column
          fixed
          prop="name"
          label="产品名称"
          :span="4">
      </el-table-column>
      <el-table-column
          prop="tenantId"
          label="所属租户"
          :span="2">
      </el-table-column>
      <el-table-column
          prop="areaName"
          label="行政区"
          :span="4">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名"
          :span="4">
      </el-table-column>
      <el-table-column
          prop="productKey"
          label="产品标识Key"
          :span="4">
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="fnLoadData"
        :current-page.sync="page"
        :page-size="bean.pageSize"
        :total="bean.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "ProductManagementView",
  methods: {
    fnSearch(){
      this.fnLoadData();
    },
    fnLoadData(p){
      this.page = p;
      this.axios.get("http://localhost:8080/product/productsList", {
        params: {
          name:this.name,
          username:this.username,
          productKey:this.productKey,
          areaCode:this.areaCode,
          page:this.page } })
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
            }
          });
    },
    fnRestFrom(p){
      this.axios.get("http://localhost:8080/product/productsList", {params: {  p } })
          .then(res=>{
            console.log(res)
            if (res.data.code === "200"){
              this.$message.success("查询成功");
              this.bean = res.data.data;
            }
          });
    }
  },
  data() {
    return {
      bean:{
        list:[]
      },
      page:1,
      deviceKey:'',
      AreaList:[],
      name:'',
      username:'',
      productKey:'',
      areaCode:'',
      userInfo:{},
      tenants:{
        name:'',
        id:''
      }
    }
  },
  mounted() {
    this.axios.get("http://localhost:8080/area/areaList")
        .then(res=>{
          console.log(res)
          if (res.data.code === "200"){
            this.$message.success("查询成功");
            this.AreaList = res.data.data;
            console.log(this.AreaList);
          }
        });
    this.axios.get("http://localhost:8080/tenants/tenantsDetail", {params:{
        id:''
      }})
        .then(res=>{
          console.log(res)
          if (res.data.code === "200"){
            this.$message.success("查询成功");
            this.tenants = res.data.data;
            console.log(this.AreaList);
          }
        });
    this.fnLoadData();
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  align-items: center;
}

.el-input {
  margin-right: 10px;
  width:150px;
}

.el-button {
  margin-right: 10px;
}
</style>

